<template>
  <div class="tetx">
    <div class="log"><div class="img"></div></div>
    <div class="weather-search">
      <button class="search" title="搜索位置">
        <span>
          
          <el-icon color="#80808C" size="16px" @keydown.enter.native="search"><Search /></el-icon>
        </span>
      </button>
      <input class="tetxt" type="text" id="value" placeholder="搜索商品、专辑、盲盒" />
    </div>
    <div class="ulx">
      <el-menu :default-active="this.$router.path" class="el-menu-demo" mode="horizontal" @select="handleSelect" router="true" :show-overflow-tooltip="true">
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/vpi">新品</el-menu-item>
      <el-menu-item index="/market">市场</el-menu-item>
      <el-menu-item index="/shop">我的</el-menu-item>
      <el-menu-item index="/belletion">公告</el-menu-item>
      <el-menu-item index="/information">新闻中心</el-menu-item>

    </el-menu>

    </div>
    <!-- 头像 -->
    
    <el-row class="demo-avatar demo-basic" v-if="getHasToken()" >
      <!-- sessionStorage.getItem("token") -->
      <div class="demo-basic--circle" @click="myshop">
        <div class="block">
          <el-avatar :size="50" src="https://static.ibox.art/file/oss/test/image/portrait/3559489f7a4049f597f4e4cfb43aa76f.png?style=st" />
        </div>
      </div>
    </el-row>
    
    <el-button  @click="dialogFormVisible = true" type="success" round  v-else size="large">登录</el-button>
    
    <el-dialog align-center center v-model="dialogFormVisible" title="元艺数字" width="550px" hight="500px">
      <el-form ref="loginFormRef" :model="LoginForm" status-icon :rules="LoginFromRul" label-width="100px" size="large" class="login-box">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="LoginForm.username" size="large" placeholder="账号"  />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="LoginForm.password" size="large" placeholder="密码" />
        </el-form-item>
        <el-form-item>
          <el-button class="logButton" type="primary" @click="login">登录</el-button>
          <el-button class="regButtont" type="primary" @click="dialogregleVisible = true;dialogFormVisible = false ">注册</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <!-- <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">登录</el-button>
        </span> -->
      </template>
    </el-dialog>

    <el-dialog align-center center v-model="dialogregleVisible" title="用户注册" width="550px" hight="500px">
      <el-form ref="regFormRef" :model="regForm" status-icon :rules="regFromRul" label-width="100px" size="large"
        class="login-box">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="regForm.username" size="large" placeholder="账号" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="regForm.password" size="large" placeholder="密码" />
        </el-form-item>
        <el-form-item>
          <el-button class="regButton" type="primary" @click="registere">确定注册</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
         <!-- <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">登录</el-button>
        </span> -->
      </template>
    </el-dialog>
    
  
  <!-- v-if="LocalStorage.getItem("token") != null"  -->


  </div>


</template>

<script>
import { ElMessage } from 'element-plus'
// import { composeEventHandlers } from 'element-plus/es/utils';
export default {
  name: 'Nav',

  data() {
    
    
    return {
      LoginForm:
        {
          username:"",
          password:""
        },
        regForm:
        {
          username:"",
          password:"",
        },
      LoginFromRul:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ]
      },
      regFromRul:{
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ]
      },

      activeIndex:'1',
      activeIndex2:'1',
      dialogFormVisible:false,
      dialogregleVisible:false,
      form:{},
      // token: ""
    };
  },
// 在初始化时取出以保存的页面路径
created() {
            this.$router.path = '/'
        },

  mounted() {

  },

  methods: {
    search(){
      this.$route.push({name:'search'})
    },
    handleSelect(key,keyPath){
      console.log(key, keyPath);
    },
    login(){
            this.$refs["loginFormRef"].validate((valid) => {
                //校验失败
                if (!valid) return ;
                //校验成功 发送请求 axios  get() --->method:get  put: method:put
                let url = "user/login";
                this.$http.post(url,this.LoginForm).then((response) => {
                       if(response.meta.status === 200){
                            //this.$message.success("登录成功");
                            ElMessage({
                                showClose: true,
                                message: '登录成功',
                                type: 'success',
                            })
                            this.dialogFormVisible=false;
                            //状态保存下来
                            console.log(response.data);
                            window.sessionStorage.setItem("token",response.data.userName);
                            window.sessionStorage.setItem("nickName",response.data.nickName);
                            //跳转
                            //this.$router.push('/');
                       }else{
                            ElMessage({
                                showClose: true,
                                message: response.meta.msg,
                                type: 'error',
                            });
                            this.LoginForm.password=""
                            this.LoginForm.username=""
                       } 
                })
            });
        },
        registere(){
          // console.log("aaaaaaaaaaaaaaaaaaaaaaa");
          this.$refs["regFormRef"].validate((valid)=>{
            if (!valid) return ;

            let url = 'user/register';
            this.$http.post(url,this.regForm).then((response)=>{
              if (response.meta.status === 200) {
                ElMessage({
                  showClose: true,
                  message: '注册成功',
                  type: 'success',
                })
                this.dialogregleVisible=false;
              } else {
                ElMessage({
                  showClose: true,
                  message: response.meta.msg,
                  type: 'error',
                });
                this.LoginForm.password = ""
                this.LoginForm.username = ""
              } 
            })
          })    
        },
        dialogTableVisiblet(){
          // 注册弹出框
          this.dialogFormVisible = false;
          this.dialogTableVisible = true;
          consle.log(this.dialogTableVisible);
          
        },
        register(){
          //注册
        },
        getHasToken() {
          return window.sessionStorage.getItem("token") !== null;
        },
        myshop(){
          this.$router.push({path: '/shop'});
        }



  },
  
  
};
</script>

<style lang="css" scoped>
.log{
  float: left;
}

.tetx::after{

    content: '';
    clear: both; /* 清除浮动 */
    display: block; /* 确保该元素是一个块级元素 */

}

.el-menu{
  float: left;
  border-bottom:none !important;
  margin-top: 12px;
  margin-left: 30px;
}

.el-menu-item{
  border-bottom:none !important;
  font-size: 14px;
}

.img{
  width: 180px;
  height: 54px;
  background:url("../assets/元艺Art.png");
  background-size: 70% auto;
  background-repeat: no-repeat;
  margin-top: 25px;
}

.weather-search{
	display:flex;
  float: left;
	width:500px;
	height:40px;
	border:1px solid white;
	border-radius:30px;
	justify-content:space-between;
	align-items:center;
	position:relative;
  background-color: rgb(236, 241, 248);
  margin-top: 18px;
}

.weather-search input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
	-webkit-text-fill-color: #000 !important;
    /* -webkit-box-shadow:0 0 0px 1000px transparent inset !important; */
    background-color:transparent;
    background-image:none;
    transition:background-color 50000s ease-in-out 0s; 
    /* 景色透明 生效时长 过渡效果启用时延迟的时间 */
  }

  .search{
    border:none !important;
    margin-left: 5px;
  }

  .weather-search{
    position: relative;
  }
.weather-search input{
	width:270px;
	height:32px;
	border:0;
	font-size:14px;
	outline:none;
	margin:0 10px;

	background-color:transparent;}

  .el-header{
    position: relative;
  }
	.tetxt{
    position:absolute;
    left: 30px;
  }
  
.ulx{
  float: left;
  display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
}


.demo-basic {
  text-align: center;
}
.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.demo-avatar{
  top: 15px;
}

.el-button{
  transform: translateY(50%);
}

.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}

.logButton{
  left: 15%;
}

.regButtont{
  left: 40%;
}

.regButton{
  left: 25%;
}



</style>